<template>
  <el-dialog :title="dialogInfo.title" :visible.sync="dialogInfo.visible" :close-on-click-modal="false"
             width="1000px" append-to-body >
    <el-row :gutter="10" class="mb8">
      <div class="flex-buttons" style="float: right">
        <el-button
          class="config-btn"
          icon="el-icon-finished"
          plain
          @click="handleAddAttr"
        >确定</el-button>
        <el-button
          class="cancel-btn"
          icon="el-icon-close"
          plain
          @click="cancle"
        >取消</el-button>
      </div>
    </el-row>

    <el-table
      border stripe
      :data="attrList"
      @selection-change="handleAttrSelectionChange"
      :row-class-name="rowConfigIndex"
      row-key="attrId" >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="属性编码" prop="attrCode" align="center" />
      <el-table-column label="属性名称" prop="attrName" align="center" />
      <el-table-column label="属性值单位" align="center" prop="valueUnit">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_goods_attr_unit" :value="scope.row.valueUnit"/>
        </template>
      </el-table-column>
      <el-table-column label="是否多选" align="center" prop="valueRadio">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.valueRadio"/>
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center" prop="updateBy" />
      <el-table-column label="操作时间" align="center" prop="updateTime" width="160" />
      <el-table-column label="状态" align="center" prop="delFlag">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.delFlag"/>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
import { findAttrsWithoutConfig, getAttr } from '@/api/goods/attr'

export default {
  name: "SelectAttr",
  dicts: ['sys_normal_disable', 'sys_goods_attr_unit', 'sys_yes_no'],
  data() {
    return {
      dialogInfo: {
        title: "商品属性选择",
        visible: false,
      },
      attrList: [],
      selectAttrList: [],
      assorts: [],
    }
  },
  methods: {
    show(params) {
      // const params = this.params;
      this.assorts = params.assorts;
      this.generateAttrList(params)
      this.dialogInfo.visible = true;
    },
    generateAttrList(params) {
      findAttrsWithoutConfig(params).then(res => {
        this.attrList = res.data;
      })
    },
    /** dialog 属性列表 多选框选中数据 */
    handleAttrSelectionChange(selection) {
      this.selectAttrList = selection;
    },
    /** 商品属性值序号 */
    rowConfigIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
      let rowClass = '';
      if (this.assorts && this.assorts.includes(row.attrId+'')) {
        rowClass += ' no-required'
      }
      return rowClass;
    },
    /** 属性添加 dialog 添加按钮 */
    handleAddAttr() {
      const selectAttrList = this.selectAttrList;
      if (selectAttrList.length === 0) {
        this.$modal.msgError("请先选择要添加的商品属性");
      } else {
        this.$emit('ok', selectAttrList);
        this.dialogInfo.visible = false;
      }
    },
    cancle() {
      this.dialogInfo.visible = false
    }
  }
}
</script>

<style scoped>
::v-deep .el-table .no-required {
  /*background: #f5f7fa;*/
  .el-table__cell {
    background: rgb(190, 190, 190) !important;
  }
}
</style>
